<template>
  <el-card class="box-card">
    <!-- 直接显示知识点名称作为卡片顶部标题 -->
    <template v-slot:header>
      <div style="font-weight: 600; font-size: clamp(16px, 2vw, 18px); color: white;font-size: 16px;">
        {{ data.name }}>>
      </div>
    </template>

    <!-- 资源预览+描述浮层 -->
  <div class="preview-container" @click="openUrl">
    <div 
      class="description-overlay"
      :class="{ 'visible': showDescription }"
      @mouseover="isHovered = true"
      @mouseleave="isHovered = false">
      {{ data.description }}
    </div>

    <!-- 加载中动画 -->
    <div v-if="isLoading && !loadError" class="loading-spinner">加载中...</div>

    <!-- 加载失败提示 -->
    <div v-if="loadError" class="error-message">
      暂不支持预览，可以点击跳转到源网页查看哦。
    </div>

    <!-- iframe 仅在未出错时显示 -->
    <iframe
      v-if="!loadError"
      class="resource-preview"
      :src="data.url"
      scrolling="no"
      @load="handleIframeLoad"
      @error="handleIframeError"
      @mouseover="isHovered = true"
      @mouseleave="isHovered = false"
    ></iframe>
  </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      isHovered: false,
      data: {
        name: '请选择你想了解的知识点',
        description: '这里展示知识点的简要描述，如果你想了解更多，可以点击这里进行跳转。',
        url: 'http://113.45.144.121:2024/285558f0-e3f5-45e5-b579-34b13357c16e.mp4'
      }
    };
  },
  computed: {
    showDescription() {
      return this.isHovered || this.isLoading;
    }
  },
  methods: {
    handleIframeLoad() {
      this.isLoading = false;
      setTimeout(() => {
        this.isHovered = false;
      }, 3000);
    },
    updateData(newData) {
      this.data = newData;
    },
    openUrl() {
      window.open(this.data.url, '_blank');  // Open the URL in a new tab
    }
  }
};
</script>

<style scoped>
.box-card {
  width: 410px;
  height: 562px;
  border: 1px solid #e0e0e0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.preview-container {
  flex: 1;
  position: relative;
  height: 520px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;  /* Hide the scrollbars */
}

.resource-preview {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 8px 8px;
  overflow: auto; /* Allow scrolling inside the iframe */
}

.description-overlay {
  height: 15%; /* 文字描述区域的高度 */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* 羽化渐变效果 */
  color: white;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  border-radius: 0 0 8px 8px;
}

.description-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 768px) {
  .box-card {
    width: 240px;
  }
}
</style>
